<template>
  <div class="card-table-box">
    <div v-for="(itemCol, indexCol) in columns" class="table-Col table-header"
      :style="{'width':itemCol.width + 'px','flex': !itemCol.width ? '1' : ''}" :key="indexCol">{{itemCol.title}}</div>
  </div>
  <div class="card-table-box">
    <div v-for="(itemCol, indexCol) in columns" class="table-Col"
      :style="{'width':itemCol.width + 'px','flex': !itemCol.width ? '1' : ''}" :key="indexCol">
      <div v-for="(itemRow, indexRow) in data" :class="['table-row',indexCol == 0 && 'Col1']" :key="indexRow">
        <slot :name="itemCol.slot" :row="itemRow" :$index="indexRow">
          <div>{{itemCol.formatter && itemCol.formatter(itemRow[itemCol.key]) || itemRow[itemCol.key]}}</div>
        </slot>
      </div>
    </div>
  </div>
  <van-empty v-if="!data || data.length == 0" description="暂无数据" />
</template>
<script setup>
const props = defineProps({
  columns: {
    type: Array,
    default: () => [
      {
        title: "渠道",
        key: "aaa",
        slot: "aaa",
      },
      {
        title: "应收保费(万元)",
        key: "bbb",
        width: "95",
      },
      {
        title: "实收保费(万元)",
        key: "ccc",
        width: "95",
      },
      {
        title: "继续率",
        key: "ddd",
      },
    ],
  },
  data: Array,
});
</script>
<style lang="less" scoped>
.card-table-box {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .table-header {
    font-size: 13px;
    color: #6d7278;
  }
  .table-Col {
    text-align: center;
    padding: 5px 10px;
    .table-row {
      position: relative;
      text-align: center;
      color: var(--van-primary-color);
      font-size: 16px;
      padding: 5px 0;
      // background-color: red;
      // margin-top: 10px;
      // background-color: red;
    }
    .Col1 {
      font-size: 18px;
      color: #000000;
    }
  }
}
</style>